<template>
  <view style="width: 100%; min-height: 100vh; background-color: #F8F8F8;">
    <view style="width: 100%; padding: 0 40upx; background-color: white;">
      <view class="flex justify-between align-center" style="width: 100%; height: 210upx;">
        <image :src="account_user_data.avatar" mode="aspectFill" style="width: 136upx; height: 136upx; border-radius: 50%;" @click="handlePreviewImgs(account_user_data.avatar)"></image>
        <view v-if="!account_user_data.is_self">
          <view v-if="!account_user_data.is_attention"
                @click="handleAttention(account_user_data.id, account_user_data)"
                class="flex justify-center align-center cu-load user-attention">
            关注
          </view>
          <view v-else @click="handleAttention(account_user_data.id, account_user_data)"
                class="flex justify-center align-center cu-load user-attentioned">
            已关注
          </view>
        </view>
      </view>
      <view style="font-size: 32upx; font-weight: bold; margin-bottom: 10upx; color: black;">{{account_user_data.nick_name}}</view>
      <view style="font-size: 24upx; color: #999999;">个性签名：{{account_user_data.sign ? account_user_data.sign : '这家伙很懒，没有留下个性签名'}}</view>
      <view class="flex align-center justify-around" style="width: 100%; height: 162upx;">
        <view style="font-size: 24upx; color: #666666;"><span
            style="font-weight: bold; margin-right: 10upx;">{{ fan_num }}</span>粉丝
        </view>
        <view style="font-size: 24upx; color: #666666; margin: 0 56upx;"><span
            style="font-weight: bold; margin-right: 10upx;">{{ attention_num }}</span>关注
        </view>
        <view style="font-size: 24upx; color: #666666;"><span style="font-weight: bold; margin-right: 10upx;">{{ zan_num }}</span>被点赞
        </view>
      </view>
    </view>
    <view style="width: 100%;">
      <scroll-view scroll-x class="bg-white nav text-center" scroll-with-animation :scroll-left="scroll_left">
        <view class="cu-item" :class="index===tab_cur?'text-red cur':''" v-for="(item,index) in tab_list" :key="index"
              @click="handleChangeTab(index, item)" :data-id="index">
          {{ item.name }}<span>{{item.article_num}}</span>
        </view>
      </scroll-view>
    </view>
    <view style="width: 100%; padding: 20upx 0;">
      <view v-if="!is_tutorials" class="flex justify-between" style="width: 100%; padding: 0 20upx; flex-wrap: wrap;">
        <view class="flex flex-direction bg-white list" v-for="(item,index) in article_data" :key="index" @click="handleToArticle(item.type, item.id)">
          <image :src="item.img_arr[0]" mode="aspectFill" style="width: 346upx; height: 384upx; border-radius: 20upx 20upx 0 0;"></image>
          <view class="flex flex-direction" style="padding: 20upx;">
            <view class="text-hidden" style="width: 100%; font-size: 28upx; font-weight: bold; color: black;">{{item.title}}
            </view>
            <view class="flex align-center" style="width: 100%; height: 40upx; margin: 7% 0;">
              <view class="flex justify-center align-center tag">{{item.category}}</view>
              <view>
                <image src="/static/icon/index/dianzan@2x.png" style="width: 26upx; height: 26upx;margin: 0 8upx;"></image>
              </view>
              <view style="color: #999999; font-size: 24upx;">{{ item.zan_num }}</view>
            </view>
            <view class="flex justify-between" v-if="item.product" style="margin-bottom: 7%;">
              <view v-if="item.product && item.product.sale_price === '0.00'"
                    style="font-size: 28upx; color: #D8D8D8; font-weight: bold;">免费
              </view>
              <view v-else style="font-size: 28upx; color: #E52718; font-weight: bold;">
                ¥{{ item.product && item.product.sale_price }}
              </view>
            </view>
            <view class="flex align-center">
              <image :src="item.user && item.user.avatar" mode="aspectFill" style="width: 44upx; height: 44upx; border-radius: 50%;"></image>
              <view class="text-hidden" style="width: 140upx; font-size: 24upx; color: #999999; margin-left: 10upx;">
                {{item.user && item.user.nick_name}}
              </view>
            </view>
          </view>
        </view>
        <view v-if="!article_data.length && show_flag" class="justify-center align-center"
              style="width: 100%; margin-top: 160upx; flex-direction: column; text-align: center;">
          <image src="/static/image/no_content@2x.png" style="width: 264upx; height: 264upx;"></image>
          <view class="flex justify-center" style="font-size: 24upx; color: #999999;">暂无内容</view>
        </view>
      </view>
      <view v-else style="width: 100%; padding: 0 20upx;">
        <view class="flex justify-between tutorials-box" v-for="(item, index) in course_data" :key="index"
              @click="handleToArticle('course', item.id)">
          <image :src="item.img_arr[0]" mode="aspectFill" style="width: 286upx; height: 198upx; border-radius: 10upx;"></image>
          <view class="flex flex-direction justify-between" style="width: 50%;">
            <view style="font-size: 30upx; color: #000000; font-weight: bold;">{{item.name}}</view>
            <view class="flex align-center" style="font-size: 20upx; color: #C5C5C5; margin: 30upx 0;">
              <image src="/static/icon/tutorials/gongkaobaike@2x.png" style="width: 30upx; height: 28upx; margin-right: 10upx;"></image>
              <view>{{item.video_tutorial_num}}</view>
              <view style="width: 2upx; height: 16upx; background-color: #C5C5C5; margin: 0 24upx;"></view>
              <image src="/static/icon/tutorials/kecheng@2x.png" style="width: 24upx; height: 28upx; margin-right: 10upx;"></image>
              <view>{{item.sale_num}}人在学</view>
            </view>
            <view class="flex align-center justify-between">
              <view style="font-size: 28upx; color: #E52718; font-weight: bold;">¥{{item.sale_price}}</view>
              <view class="flex align-center">
                <image :src="item.user && item.user.avatar" mode="aspectFill" style="width: 44upx; height: 44upx; border-radius: 50%;"></image>
                <view class="text-hidden" style="width: 120upx; font-size: 24upx; color: #999999; margin-left: 10upx;">
                  {{item.user && item.user.nick_name}}
                </view>
              </view>
            </view>
          </view>
        </view>
        <view v-if="!course_data.length && show_flag" class="justify-center align-center"
              style="width: 100%; margin-top: 160upx; flex-direction: column; text-align: center;">
          <image src="/static/image/no_content@2x.png" style="width: 264upx; height: 264upx;"></image>
          <view class="flex justify-center" style="font-size: 24upx; color: #999999;">暂无内容</view>
        </view>
      </view>
      <view class="flex align-center justify-center"
            v-if="article_data.length >= 15"
            style="width: 100%; height: 102upx; padding: 0 50upx;">
        <view style="width: 30%; height: 2upx; background-color: #F1F1F1;"></view>
        <view style="width: 40%; text-align: center;">
          <view v-if="!bottom_flag" style="color: #CACACA; font-size: 24upx; margin: 0 40upx;">到底了</view>
          <view v-else class="action">
            <view class="cu-load" :class="!is_load?'loading':'over'" style="font-size: 28upx; color: #CACACA;"></view>
          </view>
        </view>
        <view style="width: 30%; height: 2upx; background-color: #F1F1F1;"></view>
      </view>
      <!--分享框-->
      <shareDialog :share_flag="share_flag" :herf="'http://cbdtwoh5.tx2.isart.me/homePage'"
                   :intro="'我有一个优秀的人推荐给你'"
                   :article_title="account_user_data.nick_name" :article_id="account_user_id" :article_img="share_img"
                   @handleCloseShareDialog="handleCloseShareDialog"></shareDialog>
    </view>
  </view>
</template>

<script>
import { numSwitch } from "utils/wxUtil";
import shareDialog from "components/share-dialog/share-dialog";
import {accountUser_getById, category_getListByCon} from  "api/my/my"
import {article_getListByCon} from "api/search/search"
import {attention_giveAttention} from "api/attention/attention";
import {course_getListByCon} from "api/tutorials/tutorials"

export default {
  components: {
    shareDialog
  },
  data() {
    return {
      is_load: false, //加载
      tab_cur: 0, //tab索引
      show_flag: false,
      scroll_left: 0, //tab栏横向移动距离
      account_user_data: {}, //页面数据
      article_data: [], //文章数据
      course_data: [], //教程数据
      fan_num: 0,//粉丝数量
      attention_num: 0, //关注数量
      zan_num: 0, //点赞数量
      share_img: '/static/icon/1024.png', //分享个人主页图
      tab_list: [
        {
          name: '作品',
          article_num: 0,
        }
      ], //tab数据
      account_user_id: '', //用户id
      category_id: '', //分类id
      bottom_flag: true, //触底标识
      share_flag: false, //分享框
      page: 1, //分页
      is_tutorials: false, //是否是教程
    }
  },
  methods: {
    //初始化
    pageInit(account_user_id){
      accountUser_getById({account_user_id}).then(res=>{
        this.account_user_data = res.data
        this.attention_num = this.computeNum(this.account_user_data.attention_num);
        this.zan_num = this.computeNum(this.account_user_data.be_zan_num);
        this.fan_num = this.computeNum(this.account_user_data.fan_num);
      }).catch(err=>{
        console.log(err)
      })
    },
    //获取分类列表
    getCategoryData(user_id){
      category_getListByCon({user_id}).then(res=>{
        this.tab_list[0].article_num = res.data.total_categories
        res.data.categorys.forEach(item=>{
          item.name = item.name.substring(0,item.name.length-2)
          this.tab_list.push(item);
        })
        let tutorials = {
          name: '教程',
          article_num: res.data.course_num,
        }
        this.tab_list.push(tutorials)
        this.getArticleData(this.tab_list[0].id, user_id, 1)
      })
    },
    //关注
    handleAttention(user_id, account_user_data) {
      attention_giveAttention({f_table: 'account_user', f_id: user_id}).then(res => {
        account_user_data.is_attention = account_user_data.is_attention ? 0 : 1
      }).catch(err => {
        console.log(err)
      })
    },
    //获取文章数据
    getArticleData(category_id, user_id, page, type){
      this.is_load = false;
      this.page = page;
      article_getListByCon({category_id, user_id, page}).then(res=>{
        if(type){
          this.article_data = [];
        }
        let temp_data = res.data.data;
        if(!temp_data.length){
          this.bottom_flag = false;
        }else {
          temp_data.forEach(item=>{
            item.zan_num = this.computeNum(item.zan_num)
            this.article_data.push(item);
          })
        }
        // this.is_load = true;
        this.show_flag = true;
      })
    },
    //获取教程数据
    getCourseData(account_user_id, page){
      this.is_load = true;
      this.page = page;
      course_getListByCon({user_id: account_user_id, page}).then(res=>{
        let temp_data = res.data.data;
        if (!temp_data.length) {
          this.bottom_flag = false;
        }else {
          temp_data.forEach(item=>{
            this.course_data.push(item)
          })
        }
        this.is_load = false;
        this.show_flag = true;
      }).catch(err=>{
        console.log(err)
      })
    },
    //预览图片
    handlePreviewImgs(img){
      uni.previewImage({
        urls: [img]
      });
    },
    computeNum:numSwitch,
    //切换tab栏
    handleChangeTab(index, {id: category_id, name}) {
      console.log(name)
      this.course_data = [];
      this.tab_cur = index;
      this.page = 1;
      this.show_flag = false;
      this.category_id = category_id;
      this.scroll_left = (index - 1) * 60;
      this.bottom_flag = true;
      if(this.tab_list.length - 1 === this.tab_cur){
        this.getCourseData(this.account_user_id, 1,1)
        this.is_tutorials = true;
      }else {
        if(category_id){
          this.tab_list[index].name = `${name}帮帮`
        }
        this.getArticleData(category_id, this.account_user_id, 1,1)
        this.is_tutorials = false;
      }
    },
    //关闭分享模态框
    handleCloseShareDialog(e) {
      this.share_flag = false;
    },
    //去文章页
    handleToArticle(type, article_id) {
      const jump_url_obj = {
        article: '/pages/article/article',
        article_product: '/pages/passBand/projectDetail/projectDetail',
        product: '/pages/passBand/otherDetail/otherDetail',
        course: '/pages/tutorials/articleDetail/articleDetail'
      }
      this.$uniNavigateTo({
        url: jump_url_obj[type],
        query: {
          article_id,
          course_id: article_id,
        }
      })
    }
  },
  onLoad(e) {
    this.account_user_id = e.account_user_id;
    this.pageInit(e.account_user_id);
    this.getCategoryData(e.account_user_id)
  },
  //导航栏右侧分享按钮
  onNavigationBarButtonTap(e) {
    this.share_flag = true;
  },
  //上拉加载
  onReachBottom() {
    if (this.bottom_flag) {
      this.is_load = false;
      this.page += 1;
      if(this.is_tutorials){
        this.getCourseData(this.account_user_id, this.page)
      }else {
        this.getArticleData(this.category_id,this.account_user_id, this.page);
      }
    }
  },
  //下拉刷新
  onPullDownRefresh() {
    this.course_data = [];
    this.bottom_flag = true;
    this.page = 1;
    this.getArticleData(this.category_id, this.account_user_id, this.page,1);
    this.getCourseData(this.account_user_id, this.page, 1)
    uni.stopPullDownRefresh();
  }
}
</script>

<style lang="less" scoped>
.list {
  width: 346upx;
  height: 618upx;
  border-radius: 20upx;
  margin-bottom: 30upx;
}

.tag {
  font-size: 22upx;
  padding: 0 12upx;
  color: #E52718;
  height: 40upx;
  background-color: #FFE9E7;
  border-radius: 4upx;
}
.user-attentioned{
  width: 140upx;
  height: 60upx;
  border-radius: 40upx;
  font-size: 24upx;
  border: 2upx solid #E52718;
  color: #E52718;
}
.user-attention{
  width: 140upx;
  height: 60upx;
  background-color: #E52718;
  border-radius: 40upx;
  color: white;
  font-size: 24upx;
}
.tutorials-box {
  height: 238upx;
  background-color: white;
  border-radius: 10upx;
  padding: 20upx;
  margin-bottom: 20upx;
}
</style>
